//复用封函数,变化改参数

/**
 * @description 通过制定选择器获取对应的函数节点
 * @param {string} selector 选择器
 * @returns 函数节点
 */

//使用一个多功能的获取节点方法
function $(selector) {
	let nodeList = document.querySelectorAll(selector);
	//没有获取到节点时对用户的警告
	if (nodeList.length === 0) {
		return console.warn(`${selector}没有获取到节点`);
	}
	//获取单个节点
	if (nodeList.length === 1) {
		return nodeList[0];
	}
	//获取到多个节点
	if (nodeList.length > 1) {
		return nodeList;
	}
}
// 封装函数
function tab(tabSelector, tabClassName, contSelector, contClassName) {
	//1.获取点击事件
	$(tabSelector).forEach(function (v, i) {
		//2.给其绑定点击事件
		v.addEventListener("click", function () {
			//3.先排他,将所有激活类都移除
			$(tabSelector).forEach(function (item, index) {
				item.classList.remove(tabClassName);
				if (contSelector) {
					$(contSelector)[index].classList.remove(contClassName);
				}
			});
			//4.再给自己增加激活类样式
			this.classList.add(tabClassName);
			//功能六:点击tab显示对应的内容--------------------------------------------------------------------------------------------------
			//1.获取相关节点
			//2.让所有的卡片内容消失
			//3.点击li通过对应的索引显示对应的卡片内容
			if (contSelector) {
				$(contSelector)[i].classList.add(contClassName);
			}
		});
	});
}
